<template>
  <div>
    <el-card shadow="never" style="margin-top: 10px">
      <el-row style="text-align: right" v-show="$permiss[222]">
        <el-button type="primary" @click="addUpdateLog">{{ $t('新增更新日志') }}</el-button>
      </el-row>
      <el-timeline>
        <el-timeline-item v-for="item in dateLogList" color="#0bbd87" :key="item.id" :timestamp="item.date"
                          placement="top">
          <el-card shadow="hover">
            <div style="display: flex;margin: 10px 0;align-items: center;justify-content: space-between">
              <h3 style="margin:0">{{ item.version }} {{ item.title }}</h3>
              <i v-show="$permiss[605]" @click="editDatelog(item)" class="el-icon-edit"
                 style="font-size: 18px;cursor: pointer"></i>
            </div>
            <ul class="content_list">
              <li class="content_item" v-for="(content,index) in item.contentList" :key="index">{{
                  content.content
                }}
              </li>
            </ul>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </el-card>
    <Dialog :visible.sync="visible.isShow" :title="visible.title" width="50%" @close="clearForm"
            @cancel="visible.isShow = false"
            @confirm="visibleConfirm" @open="contentNum = 1">
      <el-form ref="form" :model="form" :rules="rulesForm" label-width="80px">
        <el-form-item :label="$t('更新标题')" prop="title">
          <el-input v-model="form.title"/>
        </el-form-item>
        <el-form-item :label="$t('更新版本')" prop="version">
          <el-input v-model="form.version"/>
        </el-form-item>
        <el-form-item :label="$t('更新日期')" prop="date">
          <el-date-picker
              v-model="form.date"
              type="datetime"
              format="yyyy-MM-dd HH:mm:ss"
              :placeholder="$t('选择日期')"
              value-format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
        </el-form-item>
        <el-form-item :label="$t('更新内容')" prop="contentList">
          <div style="display: flex;align-items: center;margin-bottom: 10px;width: 100%"
               v-for="(item,index) in contentNum"
               :key="item">
            <el-input style="margin-right: 10px" v-model="form.contentList[index].content">
              <template slot="append">
                <el-button icon="el-icon-plus" @click="addContentNum(index)"/>
                <el-button :disabled="contentNum <= 1" icon="el-icon-minus"
                           @click="reduceContentNum(index)"/>
              </template>
            </el-input>
            <el-checkbox v-model="form.contentList[index].isSee" @change="changeCheckBox(index,$event)"
                         :label="form.contentList[index].isSee">
              {{ $t('租户不可见') }}
            </el-checkbox>
          </div>
        </el-form-item>
      </el-form>
    </Dialog>
  </div>
</template>

<script>
import {deepClone} from "@/utils/tools";
import {systemUpdateLogAdd, systemUpdateLogList, systemUpdateLogUpdate} from '@/api/system'

export default {
  name: 'updateLog',
  data() {
    return {
      dateLogList: [],
      visible: {
        isShow: false,
        type: ''
      },
      form: {
        contentList: [{content: '', isSee: 0}]
      },
      rulesForm: {
        version: [
          {required: true, message: this.$t('不能为空'), trigger: 'blur'}
        ],
        date: [
          {required: true, message: this.$t('请选择日期'), trigger: 'blur'}
        ],
        contentList: [
          {type: 'array', required: true, message: this.$t('不能为空'), trigger: 'blur'}
        ],
      },
      contentNum: 1,
    }
  },
  mounted() {
    this.getUpdateLog()
  },
  methods: {
    addUpdateLog() {
      this.visible = {
        isShow: true,
        type: 'add',
        title: this.$t('新增更新日志')
      }
    },
    async getUpdateLog() {
      const res = await systemUpdateLogList()
      if (res.code === 1) {
        this.dateLogList = res.data
      }
    },
    reduceContentNum(index) {
      if (this.contentNum > 1) {
        this.form.contentList.splice(index, 1)
        this.contentNum = this.form.contentList.length
      }
    },
    addContentNum(index) {
      this.contentNum++
      this.form.contentList.splice(index + 1, 0, {content: '', isSee: 0})
    },
    editDatelog(rows) {
      this.form = deepClone(rows)
      this.form.contentList.map(i => {
        i.isSee = i.isSee === 0
        return i
      })
      this.visible = {
        isShow: true,
        type: 'edit',
        title: this.$t('编辑更新日志')
      }
      this.$nextTick(() => {
        this.contentNum = this.form.contentList.length
      })
    },
    async visibleConfirm() {
      this.$refs.form.validate(async v => {
        if (v) {
          const contentList = this.form.contentList.map(i => {
            i.isSee = i.isSee ? 0 : 1
            return i
          })
          const params = {
            title: this.form.title,
            version: this.form.version,
            date: this.form.date,
            contentList: contentList,
          }
          let message
          if (this.visible.type === 'add') {
            message = this.$t('新增成功')
          } else {
            message = this.$t('编辑成功')
            params.id = this.form.id
          }
          const api = (params) => this.visible.type === 'add' ? systemUpdateLogAdd(params) : systemUpdateLogUpdate(params)
          const res = await api(params)
          if (res.code === 1) {
            this.$message.success(message)
            this.clearForm()
            this.visible.isShow = false
            this.getUpdateLog()
          }
        }
      })
    },
    changeCheckBox(index, value) {
      this.form.contentList[index].isSee = value
    },
    clearForm() {
      this.form = {
        contentList: [{content: '', isSee: 0}]
      }
      this.contentNum = 0
      this.$refs.form.resetFields()
    }
  }
}
</script>

<style lang='less' scoped>
.content_list {
  list-style: disc;

  .content_item {
    padding: 3px 0;
  }
}
</style>
